<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bones</title>
	<link rel="stylesheet" href="./css/index.css">
    <script src='./js/jquery-2.2.2.min.js'></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
</head>
<body>
    <div id="bones">
        <div id="bone1">
            <div id="line1"></div>
            <div id="bone1Img">
                <img src="./images/bone-2.png" alt="" class="hideTOShow">
            </div>
        </div>
        <div id="bone2">
            <div id="line2"></div>
            <div id="bone2Img">
                <img src="./images/bone-2.png" alt="" class="hideTOShow">
            </div>
        </div>
        <div id="bone3">
            <div id="line3"></div>
            <div id="bone3Img">
                <img src="./images/bone-2.png" alt="" class="hideTOShow">
            </div>
        </div>
        <div id="bone4">
            <div id="line4"></div>
            <div id="bone4Img">
                <img src="./images/bone-2.png" alt="" class="hideTOShow">
            </div>
        </div>
    </div>
	<div id="text"></div>

    <div id="circleYellow"></div>
    <div id="fallBone">
        <img src="./images/bone-2.png" alt="">
    </div>
    <div id="bigDog">
        <img src="./images/dog.png" alt="">
    </div>
    <div id="circleYellow2"></div>
    <div id="logo1">
        <img src="./images/logo-1.png" alt="">
    </div>
    <div id="logo2">
        <img src="./images/logo-2.png" alt="">
    </div>
    <div id="logo3">
        <img src="./images/logo-3.png" alt="">
    </div>
</body>
<script>
    $text1 = $('div#text');
    function hideText() {
        $text1.hide();
    }
    function addText(num) {
        if (num > 100) {
            setTimeout("hideText()",100);

            return false;
        }
        $text1.text(num + "%");
        num++;
        setTimeout("addText(" + num + ")", 10);
    }
    $(document).ready(function(){
        addText(0);

    });
</script>
</html>
